<template>
  <main class="wss-container">
    <div class="label-box-content">
      <div class="content-box">
        <NewCard :isright="true" title="广告设置" class="table" :border="false">
          <template #right>
            <el-select
              v-model="clientTypeText"
              @change="selectTypeFn"
              clearable
              placeholder="请选择界面类型"
            >
              <el-option label="web" value="1"> </el-option>
              <el-option label="mobile" value="2"> </el-option>
            </el-select>

            <!-- <el-select v-model="value" clearable placeholder="请选择位置">
              <el-option label="搜索结果" value="result"> </el-option>
              <el-option label="搜索详情页" value="detail"> </el-option>
            </el-select> -->
            <el-button
              style="margin-left: 10px"
              @click="reset"
              class="elBtn"
              round
              >重置</el-button
            >
            <el-button type="primary" @click="inquery" class="defaultBtn" round
              >查询</el-button
            >
          </template>
          <div>
            <ComTable
              @EventRowClick="RowClickFn"
              @handleSizeChange="handleSizeChange"
              @handleCurrentChange="handleCurrentChange"
              :pagination="{
                total: pageing.total,
                pageNum: pageing.pageNum,
                pageSize: pageing.pageSize,
              }"
              :list="locationList"
              :modes="tableModes"
            >
              <el-table-column #default="{ row }" label="操作" width="100">
                <el-button @click="deleteFn(row)" type="text" class="textBtn"
                  >删除</el-button
                >
              </el-table-column>
            </ComTable>
          </div>
        </NewCard>
        
        <NewCard :isright="true" :title="currentSatuts" class="edit-box">
          <div>
            <el-form
              label-position="left"
              label-width="100px"
              :model="editForm"
              :rules="rules"
              ref="form"
            >
              <!-- <el-form-item label="显示标题" prop="title">
                <el-input
                  placeholder="请输入显示标题"
                  v-model="editForm.title"
                ></el-input>
              </el-form-item> -->
              <el-form-item label="页面类型" prop="clientType">
                <el-select
                  v-model="editForm.clientType"
                  clearable
                  placeholder="页面类型"
                >
                  <el-option label="web" value="1"> </el-option>
                  <el-option label="mobile" value="2"> </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="广告位置" prop="position">
                <el-select
                  v-model="editForm.position"
                  clearable
                  placeholder="广告位置"
                >
                  <el-option label="推荐页" value="推荐页"> </el-option>
                </el-select>
              </el-form-item>

              <!-- <el-form-item label="参数" prop="param">
                <el-input
                  placeholder="请输入参数"
                  v-model="editForm.param"
                ></el-input>
              </el-form-item> -->

              <el-form-item label="跳转页面" prop="param">
                <el-cascader
                  v-model="editForm.changeType"
                  :props="defaultProps"
                  :options="options"
                  @change="changeEditType"
                >
                </el-cascader>
              </el-form-item>

              <el-form-item label="图片" prop="photo">
                <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :auto-upload="false"
                  :on-change="changeStatus"
                >
                  <img
                    v-if="editForm.photo"
                    :src="editForm.photo"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>

              <el-form-item label="状态" prop="status">
                <el-switch
                  active-value="0"
                  inactive-value="1"
                  v-model="editForm.status"
                  active-color="#f97f2a"
                >
                </el-switch>
              </el-form-item>
            </el-form>
          </div>
          <SubBtn>
            <template slot="btn">
              <el-button @click="addAndRestFn" class="elBtn" round
                >新增</el-button
              >
              <el-button
                :disabled="editForm.type == '' ? true : false"
                type="primary"
                class="defaultBtn"
                @click="comfirmEdit"
                round
                v-hasPermi="['market:recommend:edit']"
                >确 定
              </el-button>
            </template>
          </SubBtn>
        </NewCard>
      </div>
    </div>
  </main>
</template>
<script>
import { padding } from "@/assets/styles/variables.scss";

import ComSelect from "../../../components/comSelect.vue";
import {
  getPriceCommissionListApi,
  getPriceCommissionEditApi,
} from "@/wss/newApi_3-24/financial/priceCommission.js";
import ComTable from "../../../components/comTable.vue";
import ComForm from "../../../components/comForm.vue";
import NewCard from "../../../components/newCard.vue";
import SubBtn from "@/wss/components/subBtn.vue";
import { changeType, getfilterParams } from "@/wss/utils/wss.js";
import { changeBase64Fn } from "@/wss/utils/wss.js";

import {
  getRecommendListApi,
  getRecommendRemoveApi,
  getRecommendEditApi,
  getRecommendAddApi,
} from "@/wss/newApi_3-24/market/recommend.js";
import { getConsultTypeListApi } from "@/wss/newApi_3-24/work/consultType.js";
import { getProjectTypelistApi } from "@/wss/newApi_3-24/work/projectType.js";
export default {
  name: 'advertising',
  components: {
    ComTable,
    ComForm,
    NewCard,
    ComSelect,
    SubBtn,
  },
  data() {
    return {
      // 当前的状态
      currentSatuts: "添加",
      position: "",

      options: [], //跳转位置数组
      defaultProps: {
        children: "children",
        label: "name",
        value: "id",
      },

      detailPosition: "",
      imageUrl: "",
      clientTypeText: "",
      padding: padding,
      // 标记第一次过滤
      isFirst: true,
      // 查看对话框
      lookDialogVisible: false,
      isFailtrueFilter: false, //是否过滤失败筛选
      // 保存切换失败和正常筛选的数组
      tempFilterArr: [],

      // 表格配置
      config: {
        quanxian: "work:crawler:add",
        // border: true,
        isAdd: true,
        loading: false,
      },
      // 分页参数
      pageing: { total: 0, pageNum: 1, pageSize: 10, clientType: "" },

      positionValue: "",
      // 表格配置
      tableModes: [
        {
          label: "页面类型",
          mode: "clientType",
          width: 100,
          options: [
            {
              l: "web",
              v: 1,
            },
            {
              l: "mobile",
              v: 2,
            },
          ],
        },
        // {
        //   label: "显示标题",
        //   mode: "title",
        // },
        {
          label: "广告位置",
          mode: "position",
          width: 100,
        },
        {
          label: "图片",
          mode: "photo",
          width: 200,
          isImg: true,
          showOverflowTooltip: true,
        },

        {
          label: "跳转页面",
          mode: "link",
          showOverflowTooltip: true,
          effectiveStatus: true,
        },
        {
          label: "状态",
          mode: "status",
          width: 100,
          // isSwitchDisabled: true,
          options: [
            {
              l: "开启",
              v: 0,
            },
            {
              l: "关闭",
              v: 1,
            },
          ],
        },
        // {
        //   label: "创建时间",
        //   mode: "createTime",
        // },
      ],
      // 修改定价参数
      editForm: {
        skipType: "", //5咨询 6项目
        changeType: [], //选择的跳转页面
        photo: "",
        status: "0",
        clientType: "",
        title: "",
        position: "",
        param: "",
      },
      //修改内容定价表单判断
      rules: {
        title: [
          {
            required: true,
            message: "请输入参数",
            trigger: "blur",
            type: "string",
          },
        ],
        param: [
          {
            required: true,
            message: "请选择跳转页面",
            trigger: "change",
            type: "string",
          },
        ],
        position: [
          {
            required: true,
            message: "广告位置",
            trigger: "change",
            type: "string",
          },
        ],

        photo: [
          {
            required: true,
            message: "请上传图片",
            trigger: "change",
            type: "string",
          },
        ],
        skipType: [
          {
            required: true,
            message: "请选择跳转类型",
            trigger: "change",
            type: "string",
          },
        ], //5咨询 6项目
        clientType: [
          {
            required: true,
            message: "请选择页面类型",
            trigger: "change",
            type: "string",
          },
        ],
      },
      //修改内容定价 提示框显示状态
      dialogFormVisible: false,

      locationList: [], // 广告位置列表 表格数据
      //修改内容定价 标题宽度
      formLabelWidth: "120px",
    };
  },
  async created() {
    await this.getConsultTypeListFn(); // 获取咨询类型
    await this.getProjectTypeListFn(); // 获取项目类型
    await this.addToolType() // 添加工具的类别
    await this.getRecommendListFn(); //获取广告列表
  },

  methods: {
    // 获取咨询类型
    async getConsultTypeListFn() {
      let { code, rows } = await getConsultTypeListApi();
      if (code != 200) return;
      this.options.push({
        children: [],
        name: "",
        id: "",
      });
      this.options[0].children = JSON.parse(JSON.stringify(rows));
      this.options[0].name = "咨询";
      this.options[0].id = "5";
    },

    // 获取项目类型
    async getProjectTypeListFn() {
      let { code, rows } = await getProjectTypelistApi();
      if (code != 200) return;
      this.options.push({
        children: [],
        name: "",
      });
      this.options[1].children = JSON.parse(JSON.stringify(rows));
      this.options[1].name = "项目";
      this.options[1].id = "6";
    },

    // 添加工具的类别
    addToolType(){
      this.options.push({
        children: [],
        name: "",
      });
      let list = [
        { name: "合同智审", id: "20"},
        { name: "秒贷", id: "19" }, //19目前没有用到，先用19
        { name: "合同模板", id: "4"},
        { name: "智慧文控", id: "23"},
        { name: "阿米巴预算", id: "22"},
      ]
      this.options[2].children = JSON.parse(JSON.stringify(list));
      this.options[2].name = "工具";
      this.options[2].id = "tool";
    },

    // 选择跳转页面获取typeId
    changeEditType() {
      this.editForm.skipType = this.editForm.changeType[0];
      this.editForm.param = this.editForm.changeType.join(",");
    },

    // 新增
    addAndRestFn() {
      const _this = this;
      _this.currentSatuts = "新增";
      _this.editForm = {
        skipType: "", //5咨询 6项目
        changeType: [], //选择的跳转页面
        photo: "",
        status: "0",
        clientType: "",
        title: "",
        position: "",
        param: "",
      };
    },
    // 上传图片发生改变时候
    changeStatus(file) {
      this.$set(this.editForm, "photo", URL.createObjectURL(file.raw));
      this.editForm.format = `.${file.name.split(".")[1]}`;
      changeBase64Fn(file.raw, (base64) => {
        this.editForm.base64 = base64.split(",")[1];
      });
    },
    // 查询
    inquery() {
      this.getRecommendListFn();
    },
    // 选择端
    selectTypeFn(type) {
      this.pageing.clientType = type;
    },
    // 删除广告设置
    async deleteFn(item) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let { code, msg } = await getRecommendRemoveApi(item.id);

          if (code != 200) return;
          if (item.id == this.editForm.id) this.editForm = { photo: "" };
          this.$message({
            type: "success",
            message: msg,
          });
          this.getRecommendListFn();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 获取广告设置列表
    async getRecommendListFn() {
      const _this = this;
      let { code, rows, total } = await getRecommendListApi(_this.pageing);
      if (code != 200) return;
      let locationList = JSON.parse(JSON.stringify(rows));

      _this.locationList = locationList;
      _this.pageing.total = total;

      // 计算跳转页面的链接
      _this.locationList.forEach((item) => {
        // 计算链接
        item.link = _this.getLinkJump(item)
      });
    },

    // 计算链接
    getLinkJump(item){
      if (item.skipType == "5") {
        // 咨询
        let arr = item.param.split(",");
        return `http://www.wensanshi.com/Bm-Consult/${arr[1]}?typeId=${arr[2]},${arr[3]}`;
      } else if (item.skipType == "6") {
        // 项目
        let arr = item.param.split(",");
        return `http://www.wensanshi.com/Bm-project/${arr[1]}?typeId=${arr[2]},${arr[3]}`;
      }else if (item.skipType == "4") {
        // 合同模板
        return `http://www.wensanshi.com/Bm-contract/contract`
      }else if (item.skipType == "19") {
        // 秒贷
        return `http://www.wensanshi.com/Bm-tool/Loans`
      }else if (item.skipType == "20") {
        // 合同智审
        return `http://www.wensanshi.com/Bm-contract/review`
      }else if (item.skipType == "22") {
        // 阿米巴预算
        return `http://www.wensanshi.com/Bm-tool/budget`
      }else if (item.skipType == "23") {
        // 智慧文控
        return `http://www.wensanshi.com/Bm-contract/IntelligentControl`
      }
    },

    // 重设
    reset() {
      const _this = this;
      _this.clientTypeText = "";
      _this.pageing = { pageNum: 1, pageSize: 10, clientType: "" };
    },
    // 修改定价确认
    async comfirmEdit() {
      // await this.$refs["form"].validate();
      let editForm = this.editForm,result;

      // 判断是工具的情况，修改skipType等于类型
      if(editForm.skipType=='tool'){
        editForm.skipType = editForm.param.split(',')[1]
      }
      // 计算链接
      editForm.link = this.getLinkJump(editForm)

      if (editForm.id) {
        result = await getRecommendEditApi(editForm);
      } else {
        result = await getRecommendAddApi(editForm);
      }
      if (result.code != 200) return;
      this.getRecommendListFn();
      this.$message({
        type: "success",
        message: result.msg,
      });
      // this.editForm = {
      //   skipType: "", //5咨询 6项目
      //   changeType:[],//选择的跳转页面
      //   photo: "",
      //   status: "0",
      //   clientType: "",
      //   title: "",
      //   position:"",
      //   param:'',
      // };
      // this.$refs["form"].clearValidate("skipType");
    },
    // 表格行被点击了
    RowClickFn(row, column, event) {
      this.$refs["form"].clearValidate();
      const _this = this;
      _this.currentSatuts = "修改";
      let { target } = event;
      // 是点击删除直接退出
      if (target.nodeName == "SPAN") return;

      _this.editForm = JSON.parse(JSON.stringify(row));

      // 渲染编辑的跳转页面
      _this.editForm.changeType = _this.editForm.param.split(",");
    },

    // 当前页发生改变时
    handleCurrentChange(pageNum) {
      this.pageing.pageNum = pageNum;
      this.getRecommendListFn();
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.getRecommendListFn();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 10px;
  background-color: rgba(123, 123, 123, 0.2);
  .title {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 20px;
  }
  ::v-deep .el-card {
    border-radius: 0;
    border: 0;
  }
  ::v-deep .el-tabs__nav-scroll {
    overflow: hidden;
    background: #ffffff;

    box-sizing: border-box;
    padding-left: 20px;
    height: 70px;
    line-height: 70px;
  }
  ::v-deep .el-tabs__item.is-active,
  ::v-deep .el-tabs__item:hover {
    color: #f97f2a;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: transparent;
  }
  // ::v-deep .el-tabs__item:hover {
  //   color: #f97f2a;
  // }
}

.label-box-content,
.content-box {
  height: 100%;
}

::v-deep .el-card__body {
  height: 100%;
}
::v-deep .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .el-card__body > div::-webkit-scrollbar {
  width: 0;
}

.content-box {
  display: flex;
  .table {
    flex: 1;
    margin-right: 30px;
  }
  .edit-box {
    flex: 0.5;
    position: relative;
  }
}

.el-cascader {
  width: 100%;
}

::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
::v-deep .avatar-uploader .el-upload img {
  width: 100%;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
::v-deep .right .el-input {
  width: 150px;
}

.elBtn {
  padding: 8px 20px;
}
.defaultBtn {
  background-color: #f97f2a;
  border-color: #f97f2a;
  padding: 8px 20px;
}
.textBtn {
  color: #f97f2a;
}

.el-form {
  margin-bottom: 60px;
}
.el-form .el-select {
  width: 100%;
}

::v-deep .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  line-height: 130px;
  text-align: center;
}
::v-deep .avatar {
}
::v-deep .is-in-pagination {
  width: 36px;
}

/* 右侧按钮样式 */
::v-deep .subBtn {
  padding: 8px 30px !important;
  z-index: 99;
}
::v-deep .subBtn > .el-button {
  width: 100px;
  padding: 8px 0 !important;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn > .el-button.el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}
</style>